.nom-tab-list {
  a {
    color: inherit;
    text-decoration: none;
    > .nom-icon {
      position: relative;
      top: 2px;
      margin-right: 5px;
    }
    &:hover {
      color: var(--nom-color-primary-hover);
    }
  }

  &.p-fit {
    height: 100%;

    > .nom-list-content {
      height: 100%;

      > .nom-list-item-wrapper {
        height: 100%;

        > .nom-tab-item {
          display: flex !important;
          align-items: center;
          height: 100%;
        }
      }
    }
  }

  &.p-uistyle-plain {
    > .nom-list-content {
      > .nom-list-item-wrapper > .nom-list-item {
        display: block;
        padding: 1rem 1rem;
        text-decoration: none;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
          border-color 0.15s ease-in-out;

        &.s-selected {
          color: var(--nom-color-primary);
        }
      }
    }
  }

  &.p-uistyle-hat {
    > .nom-list-content {
      border-bottom: 1px solid var(--nom-border-color);

      > .nom-list-item-wrapper > .nom-list-item {
        display: block;
        margin-bottom: -1px;
        padding: 1rem 1rem;
        text-decoration: none;
        border: 1px solid transparent;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
          border-color 0.15s ease-in-out;

        &.s-selected {
          color: var(--nom-color-primary);
          background-color: var(--nom-bg-color);
          border-color: var(--nom-border-color) var(--nom-border-color) var(--nom-bg-color);
        }
      }
    }
  }

  &.p-uistyle-line {
    > .nom-list-content {
      > .nom-list-item-wrapper > .nom-list-item {
        display: block;
        padding: 1rem 1rem;
        text-decoration: none;
        border-bottom: 2px solid transparent;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
          border-color 0.15s ease-in-out;

        &.s-selected {
          color: var(--nom-color-primary);
          border-bottom-color: var(--nom-color-primary);
        }
      }
    }
  }

  &.p-uistyle-card {
    > .nom-list-content {
      background-color: var(--nom-tabs-card-bg-color);
      border-bottom: 1px solid var(--nom-border-color);

      > .nom-list-item-wrapper {
        &:first-child {
          > .nom-list-item {
            margin-left: -1px;
          }
        }

        > .nom-list-item {
          display: block;
          margin-bottom: -1px;
          padding: 1rem 1rem;
          color: var(--nom-input-placeholder-color);
          text-decoration: none;
          border: 1px solid transparent;
          transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
            border-color 0.15s ease-in-out;

          &.s-selected {
            color: var(--nom-input-color);
            background-color: var(--nom-tabs-card-selected-bg-color);
            border-color: var(--nom-color-white) var(--nom-border-color);
            &:first-child {
              border-radius: var(--nom-tabs-card-border-radius) 0 0 0;
            }
          }
        }
      }
    }
  }

  &.p-uistyle-pill {
    > .nom-list-content {
      > .nom-list-item-wrapper {
        margin-right: 0.5rem;

        &:first-child {
          > .nom-list-item {
            margin-left: -1px;
          }
        }

        > .nom-list-item {
          display: block;
          padding: 0.5rem 1rem;
          .u-shape-round();

          &:hover {
            color: var(--nom-color-white);
            background-color: var(--nom-color-primary-hover);
          }

          &.s-selected {
            .nom-preset-primary;
          }
        }
      }
    }
  }
}

.nom-tabs {
  &.p-uistyle-plain,
  &.p-uistyle-hat,
  &.p-uistyle-line,
  &.p-uistyle-pill {
    > .nom-tab-content {
      margin-top: 1rem;
    }
  }

  &.p-uistyle-card {
    background: var(--nom-bg-color);
    border: 1px solid var(--nom-border-color);
    border-radius: var(--nom-tabs-card-border-radius);
    .nom-tabs-tools {
      height: 50px;
      padding: 0 1rem;
      line-height: 45px;
      background-color: var(--nom-tabs-card-bg-color);
      border-bottom: 1px solid var(--nom-border-color);
    }
    > .nom-tab-content {
      padding: 1rem;
    }
  }

  &.p-fit {
    display: flex;
    flex-direction: column;
    height: 100%;

    > .nom-tab-content {
      flex: 1;
      height: 100%;
      padding-top: 2.5rem;
      overflow: auto;
    }
  }
}
